<template>
	<div id="app">
		<el-container>
			<el-header>
				<div class="app-head">
					<div class="app-head-inner">
						<router-link :to="{path: '/'}">
							<img src="../build/logo.png">
						</router-link>
						<div class="head-nav">
							<ul class="nav-list">
								<router-link :to="{path: '/'}">
								<li> {{ username }}</li>
									</router-link>
								<li v-if="username!== ''" class="nav-pile">|</li>
								<li v-if="username!== ''" @click="quit">退出</li>
								<li v-if="username=== ''" @click="loginClick">登录</li>
								<li class="nav-pile">|</li>
								<li v-if="username=== ''" @click="regClick">注册</li>
								<li v-if="username=== ''" class="nav-pile">|</li>
								<li @click="aboutClick">关于</li>
							</ul>
						</div>
					</div>
				</div>

			</el-header>
			
			<router-view>
				<Index></Index>
			</router-view>

			<el-footer>
				© 2016 fishenal MIT
			</el-footer>
		</el-container>

		<my-dialog :isShow='isShowLogDialog' :title='title.Logintitle' @on-close="closeDialog('isShowLogDialog')">
			<LoginForm @close-btn="closeBtn('isShowLogDialog')"></LoginForm>
			<!--<el-form ref="form" :model="form" label-width="80px" :rules="rules" status-icon>
				<el-form-item label="请输入用户名" prop="username">
					<el-input v-model="form.username"></el-input>
				</el-form-item>

				<el-form-item label="请输入密码" prop='password'>
					<el-input type="password" v-model="form.password"></el-input>
				</el-form-item>

				<el-form-item>
					<div style="margin-top: 20px;">
						<el-button type="primary" @click="onSubmit('form')">登录</el-button>
						<el-button @click="closeDialog('isShowLogDialog')">取消</el-button>
					</div>
				</el-form-item>
			</el-form>-->
		</my-dialog>

		<my-dialog :isShow='isShowRegDialog' :title='title.Regtitle' @on-close="closeDialog('isShowRegDialog')">
			<RegForm @close-btn="closeBtn('isShowRegDialog')"></RegForm>
		</my-dialog>

		<my-dialog :isShow='isShowAboutDialog' :title='title.Abouttitle' @on-close="closeDialog('isShowAboutDialog')">
			<p style="line-height: 23px;margin: 10px;font-size:14px;">
				本报告在调研数据的基础上，采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等，通过这五个章节的研究反映专车市场的发展态势和面临的问题。报告力求客观、深入、准确地反映中国专车市场发展情况，为政府、企事业单位和社会各界提供决策依据。
			</p>
		</my-dialog>

	</div>
</template>

<script>
	import 'element-ui/lib/theme-chalk/index.css'
	import Index from './page/index'
	import MyDialog from './components/mydialog'
	import RegForm from './components/regForm'
	import LoginForm from './components/loginForm'
	

	var _self
	export default {
		name: 'App',
		components: {
			Index,
			MyDialog,
			RegForm,
			LoginForm
		},
		data() {
			return {
				isShowAboutDialog: false,
				isShowLogDialog: false,
				isShowRegDialog: false,
				isShowPromptDialog: false,
				username: '',
				title: {
					Logintitle: '登录',
					Regtitle: '注册',
					Abouttitle: '关于',
					PromptTitle: '提示'
				},
				form: {
					username: '',
					password: ''
				},
//				rules: {
//					username: [{
//							required: true, //是否必填
//							message: '用户名不能为空', //规则提示
//							trigger: 'blur' //何事件触发
//						},
//						{
//							pattern: /^[a-zA-Z0-9_-]{4,16}$/, //正则
//							message: '用户名，4到16位（字母，数字，下划线，减号）'
//						}
//					],
//					password: [{
//							required: true,
//							message: '请输入密码',
//							trigger: 'blur'
//						},
//						{
//							pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/,
//							message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 30位'
//						}
//					]
//				}
			}
		},
		methods: {
			loginClick() {
				this.isShowLogDialog = true
			},
			aboutClick() {
				this.isShowAboutDialog = true
			},
			regClick() {
				this.isShowRegDialog = true
			},
			closeDialog(i) {
				console.log(i)
				this.form.username = '',
				this.form.password = '',
				this[i] = false
			},
			closeBtn(data){
				this.closeDialog(data)
				var username = window.localStorage.getItem('username')
				if(username){
				_self.username = JSON.parse(username)
				return;
				}
			},
			//登录按钮
//			onSubmit(form) {
//				_self.$refs[form].validate((valid) => {
//					if(valid) {
//						alert('登陆成功');
//						this.$axios.post('/api/login', {
//							username: _self.form.username,
//							password: _self.form.password
//						}).then(res => {
//							_self.username = res.data.username
//							window.localStorage.setItem('username', JSON.stringify(res.data.username));
//							_self.closeDialog('isShowLogDialog')
//
//						}, (err) => {
//							console.log(err)
//						});
//					} else {
//						console.log('登录失败   error submit!!');
//						return false;
//					}
//				});
//			},
			///退出登录
			quit() {
				window.localStorage.clear('username')
				this.$router.go(0)//刷新浏览器
			}
		},
		mounted: function() {
			_self = this
			//是否登录过了
			var username = window.localStorage.getItem('username')
			if(username) {
				_self.username = JSON.parse(username)
			} else {
				this.isShowLogDialog = true
			}

		}
	}
</script>

<style scoped="scoped">
	>>>.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}
	
	>>>body>.el-container {
		margin-bottom: 40px;
	}
	>>>.el-container:nth-child(5) .el-aside,
	>>>.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}
	
	>>>.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
	/*头部*/
	.el-container{
		background: #ccccccb0!important;
	}
	.el-header {
		padding: 0;
		line-height: 60px;
	}
	
	.app-head {
		background: #363636;
		color: #b2b2b2;
		height: 60px;
		line-height: 60px;
		width: 100%;
	}
	
	.app-head-inner {
		width: 1200px;
		margin: 0 auto;
	}
	
	.head-logo {
		float: left;
	}
	
	.app-head-inner img {
		width: 50px;
		margin-top: 5px;
	}
	
	.head-nav {
		float: right;
	}
	
	.head-nav ul {
		overflow: hidden;
	}
	
	.head-nav li {
		cursor: pointer;
		float: left;
	}
	
	.nav-pile {
		padding: 0 10px;
	}
	
	.nav-list {
		line-height: 60px;
	}
	/*弹窗*/
	
	>>>.el-form-item__label {
		width: 110px!important;
	}
	
	>>>.el-form-item__content {
		margin-left: 110px!important;
	}
</style>